<template>
	<view>
		<!-- <scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollIntoIndex">
			<view :id="`top${index}`" class="scroll-item" v-for="(item,index) in topBar" :key="index"
				@tap="changeTab(index)">
				<text :class="topBarIndex===index?'f-active-color':'f-color'">{{item.name}}</text>
			</view>
		</scroll-view> -->
		<!-- <button @click="open">打开弹窗</button> -->
		<uni-popup ref="popup" type="bottom">
			<div class="popup-content">
				<p class="title">欢迎参加</p>
				<p class="content">盖洋镇第一届农副产品展销会</p>
				<div class="goaround" @click='goaround'>去逛逛</div>
			</div>
		</uni-popup>

		<!-- current改变时触发change事件 -->
		<!-- swiper有默认高度，需要修改 -->
		<swiper @change="onChangeTab" :current="topBarIndex" :style="computedClassObject" class="swiper-init">
			<swiper-item v-for="(item,index) in newTopBar" :key="index">
				<scroll-view @scrolltolower="loadMore(index)" scroll-y="true" :style="computedClassObject"
					@scroll="handleScroll" :scroll-into-view="topItem" scroll-with-animation>
					<view id="top"></view>
					<block v-if="item.data.length > 0">
						<block v-for="(k,i) in item.data" :key="i">
							<IndexSwiper v-if="k.type==='swiperList'" :dataList="k.data"></IndexSwiper>

							<template v-if="k.type==='recommendList'">
								<Card cardTitle="精选热卖"></Card>
								<Recommend :dataList="k.data"></Recommend>
							</template>

							<Banner v-if="k.type==='bannerList'" :dataList="k.imgUrl"></Banner>

							<Icons v-if="k.type==='iconsList'" :dataList="k.data"></Icons>

							<template v-if="k.type==='hotList'">
								<Card cardTitle="热销爆品"></Card>
								<Hot :dataList="k.data"></Hot>
							</template>

							<template v-if="k.type==='shopList'">
								<Card cardTitle="推荐店铺"></Card>
								<Shop :dataList="k.data"></Shop>
							</template>

							<template v-if="k.type==='commodityList'">
								<Card cardTitle="精选热卖"></Card>
								<CommodityList :dataList="k.data"></CommodityList>
							</template>
						</block>
					</block>
					<view v-else>
						暂无数据...
					</view>
					<view class="load-text f-color">
						{{item.loadText}}
					</view>
				</scroll-view>
			</swiper-item>
			<view class="backToTop" @tap="backToTop" v-if="isShowBack">
				<uni-icons type="arrow-up" size="30" color="#fff"></uni-icons>
			</view>
		</swiper>


	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import IndexSwiper from '@/components/index/indexSwiper.vue'
	import Recommend from '@/components/index/recommend.vue'
	import Card from '@/components/common/card.vue'
	import CommodityList from '@/components/common/commodityList.vue'
	import Banner from '@/components/index/Banner.vue'
	import Icons from '@/components/index/Icons.vue'
	import Hot from '@/components/index/Hot.vue'
	import Shop from '@/components/index/Shop.vue'

	export default {
		data() {
			return {
				cardTitle: ['猜你喜欢', '推荐店铺', '运动户外', '热销爆品'],
				topBarIndex: 0,
				// 顶栏跟随的id，不能以数字开头
				scrollIntoIndex: "top0",
				// 内容块总高度
				clientHeight: 500,
				isShowBack: false,
				topItem: '',
				topBar: [{
						id: 1,
						name: "推荐"
					},
					{
						id: 2,
						name: "运动户外"
					},
					{
						id: 3,
						name: "服饰内衣"
					},
					{
						id: 4,
						name: "鞋靴箱包"
					},
					{
						id: 5,
						name: "美妆个护"
					},
					{
						id: 6,
						name: "家具数码"
					},
					{
						id: 7,
						name: "食品母婴"
					},
				],
				newTopBar: []
			}
		},
		onLoad() {
			let res = [{
					type: "swiperList",
					data: [{
							imgUrl: "/static/img/swiper1.jpg"
						},
						{
							imgUrl: "/static/img/swiper2.jpg"
						},
						{
							imgUrl: "/static/img/swiper3.jpg"
						}
					]
				},
				// {
				// 	type: "recommendList",
				// 	data: [{
				// 			bigUrl: "/static/img/swiper1.jpg",
				// 			smallUrls: [{
				// 					imgUrl: "/static/img/product1.jpg"
				// 				},
				// 				{
				// 					imgUrl: "/static/img/product2.jpg"
				// 				},
				// 				{
				// 					imgUrl: "/static/img/product3.jpg"
				// 				}
				// 			]
				// 		},
				// 		{
				// 			bigUrl: "/static/img/swiper2.jpg",
				// 			smallUrls: [{
				// 					imgUrl: "/static/img/product4.jpg"
				// 				},
				// 				{
				// 					imgUrl: "/static/img/product5.jpg"
				// 				},
				// 				{
				// 					imgUrl: "/static/img/product6.jpg"
				// 				}
				// 			]
				// 		},
				// 		{
				// 			bigUrl: "/static/img/swiper3.jpg",
				// 			smallUrls: [{
				// 					imgUrl: "/static/img/product1.jpg"
				// 				},
				// 				{
				// 					imgUrl: "/static/img/product3.jpg"
				// 				},
				// 				{
				// 					imgUrl: "/static/img/product5.jpg"
				// 				}
				// 			]
				// 		},
				// 		{
				// 			bigUrl: "/static/img/swiper1.jpg",
				// 			smallUrls: [{
				// 					imgUrl: "/static/img/product2.jpg"
				// 				},
				// 				{
				// 					imgUrl: "/static/img/product4.jpg"
				// 				},
				// 				{
				// 					imgUrl: "/static/img/product6.jpg"
				// 				}
				// 			]
				// 		},
				// 	]
				// },
				{
					type: "commodityList",
					data: getApp().globalData.dataList
				},
			]
			this.newTopBar = this.initData(res)
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					// 获取可视区域高度 windowHeight
					// this.clientHeight = res.windowHeight - uni.upx2px(80) - this.getClientHeight()
					this.clientHeight = res.windowHeight
					console.log(this.clientHeight)
				}
			})
			// this.open()
		},
		// 监听标题栏按钮点击事件
		onNavigationBarButtonTap(e) {
			// 点击左边
			if (e.index == 0) {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			}
		},
		methods: {
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},
			goaround() {
				this.$refs.popup.close()
			},
			initData(res) {
				let arr = []
				for (let i = 0; i < this.topBar.length; i++) {
					let obj = {
						data: [],
						load: "first",
						loadText: "上拉加载更多..."
					}
					if (i == 0) {
						obj.data = res
					}
					arr.push(obj)
				}
				return arr
			},
			changeTab(index) {
				this.topBarIndex = index
			},
			onChangeTab(e) {
				this.topBarIndex = e.detail.current
				this.scrollIntoIndex = `top${e.detail.current}`
				if (this.newTopBar[this.topBarIndex].load === 'first') {
					// 获取新数据
					this.addData()
				}
			},
			getClientHeight() {
				// 针对刘海屏处理
				const res = uni.getSystemInfoSync()
				const system = res.platform
				if (res.statusBarHeight) {
					if (system == 'ios') {
						return 44 + res.statusBarHeight
					} else if (system == 'android') {
						return 48 + res.statusBarHeight
					}
				}
				return 0
			},
			addData(callBack) {
				let index = this.topBarIndex
				// let id = this.topBar[index].id
				// let page = Math.ceil(this.newTopBar[index].data.length / 5) + 1

				// $http.request({
				// 	url: `/index_list/${id}/data/${page}`
				// }).then((res) => {
				// 	this.newTopBar[index].data = [...this.newTopBar[index].data, ...res]
				// 	this.newTopBar[index].load = "last"
				// }).catch(() => {
				// 	uni.showToast({
				// 		title: "没有更多数据了",
				// 		icon: 'error'
				// 	})
				// })
				this.newTopBar[index].data[1].data = [...this.newTopBar[index].data[1].data, ...getApp().globalData
					.dataList.sort(() => Math.random() - 0.5)
				]
				this.newTopBar[index].load = "last"

				// 执行回调
				if (typeof callBack === 'function') {
					callBack()
				}
			},
			loadMore(index) {
				this.newTopBar[index].loadText = '加载中，请稍后...'
				setTimeout(() => {
					this.addData(() => {
						this.newTopBar[index].loadText = '上拉加载更多...'
					})
				}, 500)
			},
			handleScroll(e) {
				//只有scrollTop有用，先拿scrollTop
				let {
					scrollTop
				} = e.detail
				//滑动大于500让按钮显示
				this.isShowBack = scrollTop > 400
				//因为点第二次不行，这里记得重置清空一下
				this.topItem = ''
			},
			backToTop() {
				this.topItem = 'top'
			}
		},
		components: {
			IndexSwiper,
			Recommend,
			Card,
			CommodityList,
			Banner,
			Icons,
			Hot,
			Shop
		},
		computed: {
			computedClassObject() {
				return `height: ${this.clientHeight}px;`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-init {
		height: 500px;
	}

	.backToTop {
		position: fixed;
		z-index: 99;
		right: 14rpx;
		bottom: 100rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #17d46b96;
		box-shadow: 4rpx 4rpx 10rpx #aaa;
	}

	.popup-content {
		background-color: #17D46B;
		width: 600rpx;
		height: 400rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		color: #fff;
		position: relative;
		text-align: center;

		.title {
			line-height: 120rpx;
			height: 120rpx;
			font-size: 60rpx;
			margin-bottom: 20rpx;
		}

		.goaround {
			background-color: #fff;
			width: 250rpx;
			height: 100rpx;
			line-height: 100rpx;
			color: #17D46B;
			border-radius: 40rpx;
			position: absolute;
			bottom: 20rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}
	}

	.scroll-content {
		width: 100%;
		height: 80rpx;
		white-space: nowrap;

		.scroll-item {
			display: inline-block;
			padding: 10rpx 30rpx;
			font-size: 32rpx;

			.f-active-color {
				padding: 10rpx 0;
				border-bottom: 4rpx solid #49bdfb;
			}
		}
	}

	.load-text {
		border-top: 1rpx solid #d9d8d9;
		line-height: 60rpx;
		text-align: center;
	}
</style>